﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<link rel="STYLESHEET" type="text/css" id="SkinStyleSheet">
<title>WebNoteEditor</title>
<script language="javascript" type="text/javascript" src="../script/windialog.js"></script>
<script language="javascript">
var useMapObj;
window.onload=function()
{
	if (srcObj.useMap)
	{
		useMapObj=XEditor.document.getElementsByName(srcObj.useMap.replace("#",""))(0);
	}
	else
	{	useMapObj=null;}

	document.getElementById("btnOk").onclick=__btnOk_onclick;
	document.getElementById("btnAddRectMap").onclick=__btnAddRectMap_onclick;
	document.getElementById("btnAddCircleMap").onclick=__btnAddCircleMap_onclick;

	__initMap();
	
	AutoResizeDialogWindow();
}

function __btnOk_onclick()
{

	var i,elems,elem;
	var mapHtml="";
	var X1,Y1,X2,Y2;
	var XCenter,YCenter,radius;
	elems=document.getElementById("TempMap").contentWindow.document.getElementsByTagName("div");
	for (i=0;i<elems.length;i++)
	{
		X1=parseInt(elems[i].style.left);
		Y1=parseInt(elems[i].style.top);
		X2=parseInt(X1)+parseInt(elems[i].style.width)
		Y2=parseInt(Y1)+parseInt(elems[i].style.height)
		elems[i].setAttribute("coords",X1+","+Y1+","+X2+","+Y2);
		mapHtml+="<area href='"+elems[i].getAttribute("href")+"' target='"+elems[i].getAttribute("target")+"' coords='"+elems[i].getAttribute("coords")+"' shape='rect'>";
	}
	elems=document.getElementById("TempMap").contentWindow.document.getElementsByTagName("oval");
	for (i=0;i<elems.length;i++)
	{
		radius=parseInt(elems[i].style.width)/2;
		XCenter=parseInt(elems[i].style.left)+radius;
		YCenter=parseInt(elems[i].style.top)+radius;
		elems[i].setAttribute("coords",XCenter+","+YCenter+","+radius);
		mapHtml+="<area href='"+elems[i].getAttribute("href")+"' target='"+elems[i].getAttribute("target")+"' coords='"+elems[i].getAttribute("coords")+"' shape='CIRCLE'>";
	}
	elems=null
	if (useMapObj)
	{
		useMapObj.innerHTML=mapHtml;
	}
	else
	{
		if (mapHtml!="")
		{
			elem=XEditor.document.createElement("map");
			elem.innerHTML=mapHtml;

			srcObj.useMap="#"+elem.uniqueID;
			XEditor.document.body.appendChild(elem);
			elem.outerHTML="<map name='"+elem.uniqueID+"'>"+elem.innerHTML+"</map>";
		}
	}
	window.returnValue=true;
	window.close();
}


function __btnCancel_onclick()
{
	window.close();
}


function __initMap()
{
	var elem,d,elems,i;
	d=document.getElementById("TempMap").contentWindow.document;

	with (d)
	{
		designMode="On";
		open();
		//write("<html><body ></body></html>");
		
		
		write("<html><head><style>v\\:* { BEHAVIOR: url(#default#VML)} o\\:* {behavior:url(#default#VML)} w\\:* {behavior:url(#default#VML)} .shape {behavior:url(#default#VML)}</style></head><body style=\"MARGIN: 0px\"></body></html>");
		close();
		execCommand("2D-Position",true,true);
		execCommand("LiveResize",true,true);
		oncontextmenu=function(){return false};
		body.contentEditable=true;
		
		
		elem=createElement("img");
		elem.style.width=srcObj.clientWidth;
		elem.style.height=srcObj.clientHeight;
		elem.src=srcObj.src;
		
		elem.onclick=function()
		{
			return false;
		};
		elem.onresize=function()
		{
			this.style.width=srcObj.clientWidth;
			this.style.height=srcObj.clientHeight;
			return false;
		};
		elem.ondrag=function(){return false};

	}
	d.body.style.margin="0px";
	d.body.appendChild(elem);
	document.getElementById("TempMap").style.width=elem.clientWidth+20+"px";
	document.getElementById("TempMap").style.height=elem.clientHeight+"px";

	elem=null;
	d=null;
	
	
	if (useMapObj)
	{
		
		elems=useMapObj.children;
		for (i=0;i<elems.length;i++)
		{
			if (elems[i].shape.toLowerCase()=="rect")
			{
				__AddRecMapArea(elems[i].coords,elems[i].href,elems[i].target);
			}
			else if (elems[i].shape.toLowerCase()=="circle")
			{
				__AddCircleMap(elems[i].coords,elems[i].href,elems[i].target);
			}
			
		}
	}
}

function __AddRecMapArea(coords,href,target)
{
	var tempObj,tempStr;
	var X1,Y1,X2,Y2;

	coords=coords.replace(" ","");
	tempStr=coords.split(",");
	X1=tempStr[0];
	Y1=tempStr[1];
	X2=tempStr[2];
	Y2=tempStr[3];
	var d,elem;
	d=document.getElementById("TempMap").contentWindow.document;
	
	//alert("X1="+X1+"\n"+"Y1="+Y1+"\n"+"X2="+X2+"\n"+"Y2="+Y2+"\n");
	elem=d.createElement("div");
	d.body.appendChild(elem);
	elem.setAttribute("shape","rect");
	elem.setAttribute("href",href);
	elem.setAttribute("target",target);
	
	elem.style.position="absolute";
	elem.style.width=parseInt(X2-X1)+"px";
	elem.style.height=parseInt(Y2-Y1)+"px";
	elem.style.top=Y1+"px";
	elem.style.left=X1+"px";
	elem.style.backgroundColor="#FFFFFF";
	elem.style.border="1px #000000 solid";
	elem.style.filter="alpha(opacity=50)";

	//elem.ondblclick=__setHref;

	elem=null;
	d=null;
	
	__setHREFEditMode();
}

function __AddCircleMap(coords,href,target)
{
	var tempStr;
	var XCenter,YCenter,radius;
	coords=coords.replace(" ","");
	tempStr=coords.split(",");
	XCenter=tempStr[0];
	YCenter=tempStr[1];
	radius=tempStr[2];
	//alert("XCenter="+XCenter+"\n"+"YCenter="+YCenter+"\n"+"radius="+radius);
	tempStr="<v:oval href='"+href+"' target='"+target+"' style='position:absolute;left:"+parseInt(XCenter-radius)+";top:"+parseInt(YCenter-radius)+";width:"+radius*2+";height:"+radius*2+";z-index:2;filter:alpha(opacity=50)'/>";
	document.getElementById("TempMap").contentWindow.document.body.innerHTML=document.getElementById("TempMap").contentWindow.document.body.innerHTML+tempStr;
	
	__setHREFEditMode();
}

function __setHREFEditMode()
{
	elems=document.getElementById("TempMap").contentWindow.document.getElementsByTagName("div");
	for (i=0;i<elems.length;i++)
	{
		elems[i].ondblclick=__setHref;
	}
	elems=document.getElementById("TempMap").contentWindow.document.getElementsByTagName("oval");
	for (i=0;i<elems.length;i++)
	{
		elems[i].ondblclick=__setHref;
		elems[i].onresize=FixOval;
	}
	elems=null

	//alert(document.getElementById("TempMap").contentWindow.document.body.parentElement.innerHTML);
	
	//document.getElementById("TempMap").contentWindow.document.body.innerText=document.getElementById("TempMap").contentWindow.document.body.parentElement.innerHTML;
}

function __btnAddRectMap_onclick()
{
	__AddRecMapArea("0,0,100,32","","");
}

function __btnAddCircleMap_onclick()
{
	__AddCircleMap("36, 36, 36","","");
}

function __setHref()
{
	EditorWindow._showWindialog("dialogs/dialoglink.htm",document.getElementById("TempMap").contentWindow.document.parentWindow.event.srcElement,500,80);
}

function FixOval()
{
	//固定为正圆形
	this.style.width=this.style.height;
}

</script>
</head>
<body class="dialog" style="position: absolute; z-index: 1">
<script language="javascript" type="text/javascript">dialogTitle("lang_image_map");</script>
<iframe id="TempMap" src="" width="100%" height="200" style="" frameborder="0" align="center"></iframe>
<div class="alerttext" id="unselect"><script language="javascript" type="text/javascript">dialogPrintlang("lang_tips_imagemap_0")</script></div>
<div class="buttons">
	<script language="javascript" type="text/javascript">
		document.write("<input type=\"button\" value=\""+EditorWindow.lang_image_map_addrectarea+"\" name=\"btnAddRectMap\" class=\"SysBtn\">");
		document.write("<input type=\"button\" value=\""+EditorWindow.lang_image_map_addcirclearea+"\" name=\"btnAddCircleMap\" class=\"SysBtn\">");
		document.write("<input type=\"button\" value=\""+EditorWindow.lang_button_ok+"\" name=\"btnOk\" class=\"SysBtn5\">");
	</script>
</div>
</body>

</html>
